<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="js/rem.js"></script>
    <link rel="stylesheet" 
        href="plugins/minirefresh/minirefresh.min.css">
    <style>
        body {
            width:7.5rem;
            margin-top:300px;
        }
        .list {
            margin:0;
            padding:0;
            width:7.02rem;
            height:auto;
            margin:0 auto;
        }
        .item {
            width:7.02rem;
            height:2rem;
            border-radius: 0.12rem;
            background-color:pink;
            margin-top:0.2rem;
        }
        .box {
            width:7.1rem;
            margin:0 auto;
            background:red;
            position: fixed;
            top:0px;
            left:0px;
        }
        .box1{
            height:2000px;
        }
    </style>
</head>
<body>
    <div class="box">
        asdf
    </div>
    <div class="box1">

    </div>
    <!-- minirefresh开头的class请勿修改 -->
    <div id="minirefresh" class="minirefresh-wrap">
        <div class="minirefresh-scroll">
            
            <ul class="list">
               
            </ul>
        </div>
    </div>
    <script 
        src="plugins/minirefresh/minirefresh.min.js"
    ></script>
    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/ajax.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/touch.js"></script>
    <script src="libs/zepto/selector.js"></script>
    <script>
        var page = 0;
        //刷新
        function shuxin() {
            page = 0;
            $('.list').html('');
            // page++;
            // getData(page);
        }
        function getData(p) {
            

            var html = '';
            $.ajax({
                url: `http://youyong.ba:8080/mock/609a94bd9fdbd7143b8d6737/aa/title?page=${p}`,
                success:function(res) {
                    if (p >= 8) {
                        miniRefresh.endUpLoading(true);
                        return ;
                    } else {
                        miniRefresh.endUpLoading(false);
                    }
                    $.each(res.data,function (key,val) {
                 
                        html += `<li class="item">${val.title}</li>`
                    })
                    
                    $('.list').append(html);
                }

            })
        }
        // 引入任何一个主题后，都会有一个 MiniRefresh 全局变量
        var miniRefresh = new MiniRefresh({
            container: '#minirefresh',
            down: {
                isWrapCssTranslate: true,
                callback: function() {
                    // 下拉事件
                    console.log(1);
                    shuxin();
                    miniRefresh.endDownLoading();
                }
            },
            up: {
                callback: function() {
                    // 上拉事件
                    console.log(2);
                    page++;
                    getData(page);
                }
            }
        });
    </script>
</body>
</html>